/**
 * Copyright 2017-present, Karakal.
 * All rights reserved.
 * 
 * 2018/05/28 by xiongisxiong
 * 小部件：弹层组件
 */
import React, { PureComponent } from 'react'
import { View, StyleSheet, Easing, Animated, TouchableWithoutFeedback } from 'react-native'

import { screen, color } from '../utils'

export default class ModalMenu extends PureComponent{
    constructor () {
      super();
      this.animatedTop = new Animated.Value(0)
    }
    topAnimate = (start = 0, end = 1) => {
      this.animatedTop.setValue(start);
      Animated.timing(this.animatedTop, {
        toValue: end,
        duration: 0, // 延迟1.5秒
        easing: Easing.linear,
        // useNativeDriver: true // 此处top定位属性不能用原生驱动
      }).start();
    }
    render() {
      const topAnimation = this.animatedTop.interpolate({
        inputRange: [0, 1],
        outputRange: [screen.height, 0]
      })
      return (
        <Animated.View style={[styles.container, {top: topAnimation}]}>
            <TouchableWithoutFeedback onPress={() => this.topAnimate(1, 0)}>
                <View style={styles.cover}></View>
            </TouchableWithoutFeedback>
            <View style={styles.menuContainer}>
                {this.props.children}
            </View>
        </Animated.View>
      )
    }
}

const styles = StyleSheet.create({
  container: {
      width: screen.width,
      height: screen.height,
      position: 'absolute',
      zIndex: 5,
      backgroundColor: 'transparent',
  },
  cover: {
      width: screen.width,
      height: screen.height * 0.4,
      backgroundColor: '#777777',
      opacity: 0.7
  },
  menuContainer: {
      width: screen.width,
      height: screen.height * 0.6,
      backgroundColor: '#ffffff'
  }
});